<template>
  <a-descriptions :column='1' bordered>
    <a-descriptions-item label='access key'>
      <a-space>
        <span>{{ data.accessKey }}</span>
        <a-button class='copy-btn' type='primary' size='small' @click='handleCopy(data.accessKey)'>
          复制
        </a-button>
      </a-space>
    </a-descriptions-item>
    <a-descriptions-item label='剩余次数'>
      {{ data.remaining + ' 次' }}
    </a-descriptions-item>
    <a-descriptions-item label='请求地址'>
      <a-space>
        <span style='color: #00308f'>{{ data.requestURL }}</span>
        <a-button class='copy-btn' type='primary' size='small' @click='handleCopy(data.requestURL)'>
          复制
        </a-button>
      </a-space>
    </a-descriptions-item>
    <a-descriptions-item label='请求方式'>
      {{ data.requestType }}
    </a-descriptions-item>
  </a-descriptions>
</template>

<script setup>
import { handleCopy } from '@/utils/copyUtil';

const data = {
  accessKey: 'SDFs234534ldkfgmsdfg98234SD',
  remaining: 345345,
  requestURL: 'http://127.0.0.1:8000/api/v1/lianhui-cloud/create',
  requestType: 'GET'
};

</script>

<style scoped lang='less'>
.copy-btn {
  padding: 10px 5px;
  border-radius: 5px;
}
</style>